<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fireworks with Blossom Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
    const canvas = document.getElementById('fireworksCanvas');
    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function random(min, max) {
        return Math.random() * (max - min) + min;
    }

    function Firework() {
        this.x = Math.random() * canvas.width;
        this.y = canvas.height;
        this.size = 2;
        this.speedY = random(-11, -8);
        this.color = `hsl(${random(0, 360)}, 100%, 50%)`;
        this.particles = [];

        this.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.closePath();
        };

        this.update = function() {
            this.y += this.speedY;
            this.speedY += 0.1; // Gravity effect

            // Explode the firework into particles
            if (this.speedY >= 0 && this.particles.length === 0) {
                this.explode();
            }

            this.particles.forEach((particle, index) => {
                if (particle.size <= 0.1) {
                    this.particles.splice(index, 1);
                } else {
                    particle.update();
                }
            });
        };

        this.explode = function() {
            for (let i = 0; i < 100; i++) { // More particles for a fuller effect
                this.particles.push(new Particle(this.x, this.y, this.color));
            }
        };
    }

    function Particle(x, y, color) {
        this.x = x;
        this.y = y;
        this.size = random(1, 3);
        this.speedX = random(-5, 5);
        this.speedY = random(-5, 5);
        this.color = color;
        this.gravity = 0.05; // Small gravity effect on particles
        this.fade = 0.98; // Fade effect

        this.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.closePath();
        };

        this.update = function() {
            this.x += this.speedX;
            this.y += this.speedY;
            this.speedY += this.gravity;
            this.size *= this.fade; // Shrink particles over time
        };
    }

    let fireworks = [];

    function animate() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // Add slight fade to the background
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        if (random(0, 1) < 0.02) {
            fireworks.push(new Firework());
        }

        fireworks.forEach((firework, index) => {
            if (firework.particles.length === 0 && firework.speedY >= 0) {
                fireworks.splice(index, 1);
            } else {
                firework.update();
                firework.draw();
            }
            firework.particles.forEach(particle => {
                particle.draw();
            });
        });
        requestAnimationFrame(animate);
    }

    animate();
</script>
</body>
</html>
